<template>
    <a-modal
        v-model:visible="visible"
        :title="title"
        :on-before-ok="handleBeforeOk"
        @cancel="handleCancel"
    >
        <template #title></template>
        <div>
            <a-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                auto-label-width
            >
                <a-form-item
                    v-if="!(IS_EDIT || IS_APPEND)"
                    label="所属应用"
                    field="application"
                >
                    <a-select
                        v-model="formData.application"
                        :options="ApplicationOptions"
                        :placeholder="
                            $t('select.placeholder') + $t('suo-shu-ying-yong')
                        "
                    />
                </a-form-item>
                <a-form-item
                    field="type"
                    :label="$t('cai-dan-lei-xing')"
                    :disabled="IS_EDIT || IS_APPEND"
                >
                    <a-radio-group v-model="formData.type">
                        <a-radio :value="1">{{ $t('mu-lu') }}</a-radio>
                        <a-radio :value="2">{{ $t('cai-dan') }}</a-radio>
                        <a-radio :value="3">{{ $t('an-niu') }}</a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item field="name" label="中文名称">
                    <a-input v-model="formData.name"></a-input>
                </a-form-item>
                <a-form-item field="nameHk" label="中文简体">
                    <a-input v-model="formData.nameHk"></a-input>
                </a-form-item>
                <a-form-item field="nameEn" label=" 英文名称">
                    <a-input v-model="formData.nameEn"></a-input>
                </a-form-item>
                <a-form-item field="code" :label="$t('cai-dan-code')">
                    <a-input v-model="formData.code"></a-input>
                </a-form-item>
                <a-form-item
                    v-if="formData.type == 3"
                    field="permission"
                    :label="$t('quan-xian-biao-shi')"
                >
                    <a-input v-model="formData.permission"></a-input>
                </a-form-item>

                <a-form-item
                    v-if="!IS_BUTTON"
                    field="router"
                    :label="$t('cai-dan-lu-jing')"
                >
                    <a-input v-model="formData.router"></a-input>
                </a-form-item>
                <a-form-item
                    v-if="!IS_BUTTON"
                    field="component"
                    :label="$t('component')"
                >
                    <a-input v-model="formData.component"></a-input>
                </a-form-item>

                <a-form-item
                    v-if="formData.type !== 1"
                    field="pid"
                    :label="$t('shang-ji-mu-lu')"
                >
                    <!-- <a-cascader
                        v-model="formData.pid"
                        :options="menuList"
                        allow-clear
                        allow-search
                        check-strictly
                        :field-names="{ value: 'id', label: 'name' }"
                    /> -->
                    <a-tree-select
                        v-model="formData.pid"
                        style="width: 100%"
                        :dropdown-style="{
                            maxHeight: '400px',
                            overflow: 'auto',
                        }"
                        placeholder="请选择上级菜单"
                        allow-clear
                        :data="menuList"
                        :field-names="{
                            key: 'id',
                            title: 'name',
                            children: 'children',
                        }"
                    />
                </a-form-item>
                <a-form-item label="图标" field="icon">
                    <a-input
                        v-model="formData.icon"
                        style="width: calc(100% - 70px)"
                        placeholder="请选择图标"
                        allow-clear
                    />
                    <a-button
                        type="primary"
                        @click="() => showIconModal(formData.icon)"
                        >选择</a-button
                    >
                </a-form-item>

                <a-form-item
                    v-if="!IS_BUTTON"
                    field="sort"
                    :label="$t('pai-xu')"
                >
                    <a-input-number
                        v-model="formData.sort"
                        :precision="0"
                        :min="0"
                        model-event="input"
                    />
                </a-form-item>
            </a-form>
            <Icon-selector ref="iconSelector" @iconCallBack="iconCallBack" />
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
    import { ref, reactive, PropType, computed } from 'vue';
    import { useI18n } from 'vue-i18n';
    import IconSelector from '@/components/icon-selector/index.vue';
    import { addMenu, updateMenu } from './service';
    import { ApplicationOptions } from './const';

    const iconSelector = ref();

    const { t } = useI18n();
    const props = defineProps({
        title: {
            type: String,
            default: undefined,
        },
        type: {
            type: String as PropType<'ADD' | 'EDIT' | 'APPEND'>,
            default: 'ADD',
        },
        menuList: {
            type: Array,
            default: () => [],
        },
    });

    const emit = defineEmits(['submit']);

    const visible = ref(false);
    const formRef = ref();

    const formData = reactive({
        type: 1,
        name: '',
        nameHk: '',
        nameEn: '',
        code: '',
        router: '',
        permission: '',
        component: '',
        pid: undefined,
        application: 'station',
        icon: '',
        sort: 1,
    });

    // 图标选择器回调
    const iconCallBack = (value: any) => {
        formData.icon = value;
    };

    const formRules = {
        name: [
            {
                required: true,
                message: '请输入中文名称',
            },
        ],
        nameHk: [
            {
                required: true,
                message: '请输入中文简体',
            },
        ],
        nameEn: [
            {
                required: true,
                message: '请输入英文名称',
            },
        ],
        application: [
            {
                required: true,
                message: '请选择所属应用',
            },
        ],
        router: [
            {
                required: true,
                message: t('qing-shu-ru-cai-dan-lu-jing'),
            },
        ],
        component: [
            {
                required: true,
                message: t('qing-shu-ru-cai-dan-dui-ying-wen-jian-lu-jing'),
            },
        ],
        code: [{ required: true, message: t('qing-shu-ru-cai-dan-code') }],
        permission: [
            {
                required: true,
                message: t('qing-shu-ru-cai-dan-quan-xian-biao-shi'),
            },
        ],
        pid: [{ required: true, message: t('qing-xuan-ze-shang-ji-mu-lu') }],
        sort: [
            {
                required: true,
                message: t('qing-shu-ru-pai-xu-zhi'),
            },
        ],
    };

    const IS_EDIT = computed(() => props.type === 'EDIT');
    const IS_APPEND = computed(() => props.type === 'APPEND');
    const IS_BUTTON = computed(() => +formData.type === 3);

    function showIconModal(val) {
        iconSelector.value.showIconModal(val);
    }

    function open(data: any) {
        Object.assign(formData, data);
        visible.value = true;
    }

    const handleBeforeOk = async () => {
        const res = await formRef.value.validate();
        const payload = {
            ...formData,
            pid: formData.pid || 0,
        };
        if (!res) {
            if (props.type === 'ADD' || props.type === 'APPEND') {
                await addMenu(payload);
            } else {
                await updateMenu(payload);
            }
            emit('submit');
            formRef.value.resetFields();
            return true;
        }
        return false;
    };

    function handleCancel() {
        formRef.value.resetFields();
        visible.value = false;
    }

    defineExpose({
        open,
    });
</script>
